<!DOCTYPE html>
<html>
<head>
    <title>Thermodynamics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="400" height="580"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '28px KaiTi, serif';
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';

        // Diagram dimensions
        const tubeCenterX = 170;
        const tubeWidth = 100;
        const tubeHeight = 400;
        const tubeTopY = 50;
        const tubeBottomY = tubeTopY + tubeHeight;
        const tubeLeftX = tubeCenterX - tubeWidth / 2;
        const tubeRightX = tubeCenterX + tubeWidth / 2;

        // 1. Draw the test tube
        ctx.beginPath();
        // Left wall
        ctx.moveTo(tubeLeftX, tubeTopY);
        ctx.lineTo(tubeLeftX, tubeBottomY);
        // Right wall
        ctx.moveTo(tubeRightX, tubeTopY);
        ctx.lineTo(tubeRightX, tubeBottomY);
        // Bottom
        ctx.moveTo(tubeLeftX, tubeBottomY);
        ctx.lineTo(tubeRightX, tubeBottomY);
        ctx.stroke();

        // 2. Draw the partition (隔板 m)
        const partitionY = tubeTopY + tubeHeight / 2;
        const partitionHeight = 12;
        
        ctx.save();
        ctx.beginPath();
        ctx.rect(tubeLeftX, partitionY, tubeWidth, partitionHeight);
        ctx.stroke(); 
        ctx.clip(); 
        
        // Draw hatching inside the partition
        ctx.lineWidth = 1.5;
        for (let i = -partitionHeight; i < tubeWidth; i += 6) {
            ctx.moveTo(tubeLeftX + i, partitionY + partitionHeight);
            ctx.lineTo(tubeLeftX + i + partitionHeight, partitionY);
        }
        ctx.stroke();
        ctx.restore();
        
        ctx.lineWidth = 2; // Restore line width

        // 3. Draw the gas (气体)
        const gasTopY = partitionY + partitionHeight;
        const gasRegionHeight = tubeBottomY - gasTopY;
        const numDots = 600;

        for (let i = 0; i < numDots; i++) {
            const x = tubeLeftX + 2 + Math.random() * (tubeWidth - 4);
            const y = gasTopY + 2 + Math.random() * (gasRegionHeight - 4);
            ctx.beginPath();
            ctx.arc(x, y, 1, 0, 2 * Math.PI);
            ctx.fill();
        }

        // 4. Draw labels and leader lines
        ctx.lineWidth = 1.5;

        // Label: 试管 M (Test tube M)
        const labelTestTubeX = 270;
        const labelTestTubeY = 100;
        ctx.fillText('试管 M', labelTestTubeX, labelTestTubeY);
        ctx.beginPath();
        ctx.moveTo(tubeRightX, tubeTopY + 60);
        ctx.lineTo(labelTestTubeX - 5, labelTestTubeY - 5);
        ctx.stroke();

        // Label: 隔板 m (Partition m)
        const labelPartitionX = 270;
        const labelPartitionY = 260;
        ctx.fillText('隔板 m', labelPartitionX, labelPartitionY);
        ctx.beginPath();
        ctx.moveTo(tubeRightX, partitionY + partitionHeight / 2);
        ctx.lineTo(labelPartitionX - 5, labelPartitionY - 5);
        ctx.stroke();

        // Label: 气体 (Gas)
        const labelGasX = 270;
        const labelGasY = 350;
        ctx.fillText('气体', labelGasX, labelGasY);
        ctx.beginPath();
        ctx.moveTo(tubeRightX, gasTopY + gasRegionHeight / 2);
        ctx.lineTo(labelGasX - 5, labelGasY - 5);
        ctx.stroke();

        // 5. Draw the figure caption
        ctx.font = '30px KaiTi, serif';
        ctx.fillText('热图 3.3.1', canvas.width / 2 - 70, 520);

    </script>
</body>
</html>